<template>
  <el-row>
    <el-col :span="14" class="container-left">
      <mine-face></mine-face>
    </el-col>
    <el-divider direction="vertical"></el-divider>
    <el-col :span="7" class="container-right">
      <el-card shadow="always">
        <template #header>
          <div class="card-header">
            <span>登录</span>
          </div>
        </template>
        <mine-login-form></mine-login-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import MineLoginForm from "@/views/login/components/mine-login-form";
import MineFace from "@/components/mine-face";

const {ElMessage} = require("element-plus");
const {ref} = require("vue");

export default {
  name: "index",
  components: {MineFace, MineLoginForm},
  setup() {
    return {}
  }
}
</script>

<style scoped>


.el-col {
  height: 100vh;
}

.container-right {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.container-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.el-divider {
  height: 100vh;
}

.card-header {
  text-align: center;
}

.el-card {
  width: 20vw;
  height: 33vh;
}

.face-container {
  display: flex;
  flex-direction: row;
  align-items: center;
}

</style>
